<section class="topbox">
    <div class="top-type">{{proInfo.orderStatusStr}}</div>
    <div class="gutter-example">
        <div nz-row [nzGutter]="32">
            <div nz-col class="gutter-row" [nzSpan]="8">
                <div class="grid-config">
                    <p>派车单号</p>
                    <p>{{proInfo.orderNo}}</p>
                </div>
            </div>
            <div nz-col class="gutter-row" [nzSpan]="8">
                <div class="grid-config">
                    <p>发货日期</p>
                    <p>{{proInfo.deliverTime}}</p>
                </div>
            </div>
            <div nz-col class="gutter-row" [nzSpan]="8">
                <div class="grid-config">
                    <p>公司</p>
                    <p>{{proInfo.customerName}}</p>
                </div>
            </div>
            <!-- <div nz-col class="gutter-row" [nzSpan]="8">
                <div class="grid-config">
                    <p>发布人</p>
                    <p>大厦</p>
                </div>
            </div> -->
            <div nz-col class="gutter-row" [nzSpan]="8">
                <div class="grid-config">
                    <p>车辆类别</p>
                    <p>{{proInfo.carType}}</p>
                </div>
            </div>
            <div nz-col class="gutter-row" [nzSpan]="8">
                <div class="grid-config">
                    <p>挂车</p>
                    <p>{{proInfo.isTrailer}}</p>
                </div>
            </div>
            <div nz-col class="gutter-row" [nzSpan]="8">
                <div class="grid-config">
                    <p>车辆</p>
                    <p>{{proInfo.carNum}}</p>
                </div>
            </div>
            <div nz-col class="gutter-row" [nzSpan]="8">
                <div class="grid-config">
                    <p>货重（t）</p>
                    <p>{{proInfo.goodsWeight}}</p>
                </div>
            </div>
            <div nz-col class="gutter-row" [nzSpan]="8">
                <div class="grid-config">
                    <p>预计耗时</p>
                    <p>{{proInfo.expectCostTime}}</p>
                </div>
            </div>
            <div nz-col class="gutter-row" [nzSpan]="8">
                <div class="grid-config">
                    <p>司机运费（元）</p>
                    <p>{{proInfo.freight}}</p>
                </div>
            </div>
            <div nz-col class="gutter-row" [nzSpan]="8">
                <div class="grid-config">
                    <p>运费状态</p>
                    <p>{{proInfo.payStatus}}</p>
                </div>
            </div>
        </div>
    </div>
    <section class="router">
        <section class="title">
            <h3>路径</h3>
        </section>
        <section class="routerway">
            <section class="begin">
                <h3>{{proInfo.startingCity}}</h3>
            </section>
            <section class="line">
                <h3>运至</h3>
            </section>
            <section class="end">
                <h3>{{proInfo.endCity}}</h3>
            </section>
        </section>
    </section>
    <section class="action">
        <div nz-row>
            <div nz-col class="gutter-row" [nzSpan]="8">
                <!-- <div class="grid-config">
                    <p>司机运费（元）</p>
                    <div class="table">
                        <nz-input-number style="width:120px;" [(ngModel)]="demoValue" [nzMin]="1" [nzStep]="1"></nz-input-number>
                    </div>
                </div> -->
            </div>
        </div>
        <div nz-row>
            <div nz-col class="gutter-row" [nzSpan]="8">
                <div class="grid-config">
                    <p>调派</p>
                    <div class="table">
                        <nz-radio-group [(ngModel)]="radioValue">
                            <label nz-radio [nzValue]="1">
                          <span>指派</span>
                        </label>
                            <label nz-radio [nzValue]="2" [nzDisabled]="isDisabled">
                          <span>竞价</span>
                        </label>
                        </nz-radio-group>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="table">
                <nz-table #nzTable [nzTotal]="_total" [nzAjaxData]="data" [nzPageSize]="10" (nzPageIndexChange)="resetIndex($event)">
                    <thead nz-thead>
                        <tr>
                            <!-- <th nz-th nzCheckbox>
                                <label nz-checkbox [(ngModel)]="_allChecked" [nzIndeterminate]="_indeterminate" (ngModelChange)="_checkAll($event)">
                                </label>
                            </th> -->
                            <th nz-th><span>序号</span></th>
                            <th nz-th><span>物流公司名称</span></th>
                            <th nz-th><span>负责人</span></th>
                            <!-- <th nz-th>
                                <nz-select style="width: 100px;" [(ngModel)]="selectedOption" [nzPlaceHolder]="'全'" nzAllowClear>
                                    <nz-option *ngFor="let option of options" [nzLabel]="option.label" [nzValue]="option" [nzDisabled]="option.disabled">
                                    </nz-option>
                                </nz-select>
                            </th> -->
                            <th nz-th><span>负责人联系方式</span></th>
                            <!-- <th nz-th>
                                <nz-select style="width: 100px;" [(ngModel)]="selectedOption" [nzPlaceHolder]="'常驾驶车辆'" nzAllowClear>
                                    <nz-option *ngFor="let option of options" [nzLabel]="option.label" [nzValue]="option" [nzDisabled]="option.disabled">
                                    </nz-option>
                                </nz-select>
                            </th> -->
                            <th nz-th><span>入住时间</span></th>
                            <th nz-th><span>操作</span></th>
                        </tr>
                    </thead>
                    <tbody nz-tbody>
                        <tr nz-tbody-tr *ngFor="let data of nzTable.data;let i = index">
                            <!-- <td nz-td nzCheckbox>
                                <label nz-checkbox [(ngModel)]="data.checked" (ngModelChange)="checkDriver($event,i)">
                                </label>
                            </td> -->
                            <td nz-td>{{i+1}}</td>
                            <td nz-td>{{data.logisticsCompanyName}}</td>
                            <td nz-td>{{data.contacts}}</td>
                            <td nz-td>{{data.contactsMobile}}</td>
                            <!-- <td nz-td>
                                <nz-select style="width: 100px;" [(ngModel)]="hybSendOutGoodDto[i].options" [nzPlaceHolder]="'常驾驶车辆'" (ngModelChange)="checkOpt()">
                                    <nz-option *ngFor="let option of optionCar" [nzLabel]="option.label" [nzValue]="option" [nzDisabled]="option.disabled">
                                    </nz-option>
                                </nz-select>
                            </td> -->
                            <td nz-td>{{data.checkInTime}}</td>
                            <td nz-td>
                                <button nz-button [nzType]="'default'" (click)="showModal(data.logisticsCompanyId)">
                                <span>调派</span>
                              </button>
                            </td>
                            <!-- <td nz-td>
                                <nz-input-number [nzDisabled]="!data.checked" [(ngModel)]="hybSendOutGoodDto[i].deposit" [nzSize]="'large'" [nzStep]="1"></nz-input-number>
                            </td>
                            <td nz-td>
                                <nz-input-number [nzDisabled]="!data.checked" [(ngModel)]="hybSendOutGoodDto[i].oilCardPay" [nzSize]="'large'" [nzStep]="1"></nz-input-number>
                            </td>
                            <td nz-td>
                                <nz-input-number [nzDisabled]="!data.checked" [(ngModel)]="hybSendOutGoodDto[i].bankCardTransfer" [nzSize]="'large'" [nzStep]="1"></nz-input-number>
                            </td> -->
                        </tr>
                    </tbody>
                </nz-table>
            </div>
        </div>
        <nz-modal [nzVisible]="isVisible" [nzWidth]="960" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="modalFooter" (nzOnCancel)="handleCancel($event)">
            <ng-template #modalTitle>
                人员分配
            </ng-template>
            <ng-template #modalContent>
                <nz-table #nzTable [nzTotal]="_totalPeo" [nzAjaxData]="dataPeople" [nzPageSize]="10" (nzDataChange)="_displayDataChange($event)" (nzPageIndexChange)="resetIndex($event)">
                    <thead nz-thead>
                        <tr>
                            <th nz-th nzCheckbox>
                                <label nz-checkbox [(ngModel)]="_allChecked" [nzIndeterminate]="_indeterminate" (ngModelChange)="_checkAll($event)">
                                  </label>
                            </th>
                            <th nz-th><span>姓名</span></th>
                            <th nz-th><span>联系电话</span></th>
                            <th nz-th><span>驾驶证类型</span></th>
                            <th nz-th><span>状态</span></th>
                            <th nz-th><span>承运次数</span></th>
                            <th nz-th><span>车辆</span></th>
                            <th nz-th><span>押金</span></th>
                            <th nz-th><span>油卡费用</span></th>
                            <th nz-th><span>银行卡费用</span></th>
                        </tr>
                    </thead>
                    <tbody nz-tbody>
                        <tr nz-tbody-tr *ngFor="let datapeo of nzTable.data;let i = index">
                            <td nz-td nzCheckbox>
                                <label nz-checkbox [(ngModel)]="datapeo.checked" (ngModelChange)="_refreshStatus($event)">
                                  </label>
                            </td>
                            <td nz-td>{{datapeo.driverName}}</td>
                            <td nz-td>{{datapeo.driverMobile}}</td>
                            <td nz-td>{{datapeo.driverType}}</td>
                            <td nz-td>{{datapeo.status}}</td>
                            <td nz-td>{{datapeo.transportNum}}</td>
                            <td nz-td>
                                <nz-select [nzDisabled]="!datapeo.checked" style="width: 100px;" [(ngModel)]="hybSendOutGoodDto[i].carId" [nzPlaceHolder]="'常驾驶车辆'" nzAllowClear>
                                    <nz-option *ngFor="let option of optionCar" [nzLabel]="option.text" [nzValue]="option.value" [nzDisabled]="option.disabled">
                                    </nz-option>
                                </nz-select>
                            </td>
                            <td nz-td>
                                <nz-input style="width:70px;" [nzDisabled]="!datapeo.checked" [(ngModel)]="hybSendOutGoodDto[i].deposit" [nzSize]="'large'"></nz-input>
                            </td>
                            <td nz-td>
                                <nz-input style="width:70px;" [nzDisabled]="!datapeo.checked" [(ngModel)]="hybSendOutGoodDto[i].oilCardPay" [nzSize]="'large'"></nz-input>
                            </td>
                            <td nz-td>
                                <nz-input style="width:70px;" [nzDisabled]="!datapeo.checked" [(ngModel)]="hybSendOutGoodDto[i].bankCardTransfer" [nzSize]="'large'"></nz-input>
                            </td>
                        </tr>
                    </tbody>
                </nz-table>
            </ng-template>
            <ng-template #modalFooter>
                <button nz-button [nzType]="'default'" [nzSize]="'large'" (click)="handleCancel($event)">
                    返 回
                    </button>
                <button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="handleOk($event)" [nzLoading]="isConfirmLoading">
                    确认调派
                    </button>
            </ng-template>
        </nz-modal>
    </section>
</section>